<template>
  <div class="recommend">
    <div class="title">艺术家民宿推荐</div>

    <div class="tab">
      <wd-tabs
        v-model="tab"
        swipeable
        :lineWidth="24"
        :lineHeight="3"
        color="#070B1A"
        inactiveColor="#8A8F99"
        customClass="custom-index-tabs"
        :show-scrollbar="false"
      >
        <wd-tab v-for="(item, index) in tabList" :key="index" :title="item.dictValue"></wd-tab>
      </wd-tabs>
    </div>

    <div class="hotel-list" v-if="hotelList.length > 0">
      <HotelItem v-for="(item, index) in hotelList" :key="index" :hotel="item" />
    </div>
    <Seat v-else height="300px" class="mt-26rpx" :loading="loading" size="mini" />
  </div>
</template>
<script lang="ts" setup>
import { getDict } from '@/utils/index'
import HotelItem from './HotelItem.vue'

defineOptions({
  name: 'Recommend',
})

const tab = ref<number>(0)
const tabList = ref([])
const hotelList = ref([])
const loading = ref(false)

getDict('homestay_classify').then((res: any) => {
  tabList.value = res

  if (res.length > 0) {
    getData(true)
  }
})

watch(tab, () => {
  getData(true)
})

let current = 1
let isMore = true
function getData(isRefresh = false) {
  if (isRefresh) {
    isMore = true
  }
  if (!isMore) return
  current = isRefresh ? 1 : current + 1

  loading.value = true
  http
    .get('/hotels-layout-app/open/recommend-page', {
      classify: tabList.value[tab.value].dictKey,
      current,
      size: 20,
    })
    .then((res: any) => {
      if (current === 1) {
        hotelList.value = res.records
      } else {
        hotelList.value = hotelList.value.concat(res.records)
      }
      if (hotelList.value.length === res.total) {
        isMore = false
      }
    })
    .finally(() => {
      loading.value = false
    })
}

defineExpose({
  getMore() {
    getData()
  },
})
</script>
<style lang="scss" scoped>
.recommend {
  margin: 38rpx 30rpx 0;
  .title {
    font-size: 30rpx;
    font-weight: 700;
    line-height: 36rpx;
    color: var(--color1);
  }
  .tab {
    height: 73rpx;
    margin-top: 25rpx;
  }
  .hotel-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 26rpx;
    column-gap: 26rpx;
    margin-top: 26rpx;
  }
}
</style>
